<template>
  <div class="user_right fl ml20">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部" name="first">
      </el-tab-pane>
      <el-tab-pane label="未处理" name="second">
      </el-tab-pane>
      <el-tab-pane label="已受理" name="third">
      </el-tab-pane>
      <el-tab-pane label="已作废" name="fourth">
      </el-tab-pane>
    </el-tabs>
    <div class="order_table c333">
      <table v-if="orders.length" border="0" cellspacing="0" cellpadding="0" width="100%">
        <colgroup>
            <col width="200">
            <col width="130">
            <col width="150">
            <col width="100">
            <col width="120">
            <col width="100">
        </colgroup>
        <tbody>
          <tr>
            <th class="first">订单号</th>
            <th>总金额</th>
            <th>下单时间</th>
            <th>订单状态</th>
            <th>支付方式</th>
            <th class="last">操作</th>
          </tr>
        </tbody>
        <tbody>
          <tr v-for="item in orders" :key="item.id">
          <td><a href="detail.aspx?id=396403" class="c333">{{item.no}}</a><span class="c999">({{item.items.length}}种产品)</span></td>
          <td>¥{{item.total_amount}}</td>
          <td>{{item.created_at | formatDate}}</td>
          <td>
            <b v-if="item.closed" class="cff0000">已作废</b>
            <b v-else class="cff0000">{{skipStatusDict[item.status]}}</b>
          </td>
          <td>{{paymentDict[item.payment_method]}}</td>
          <td class="opare" dataid="396403" dataplist="184624-1">
            <div v-if="!item.closed && item.status !== 'received'" class="cancel button" @click="cancel(item.id)">取消订单</div>
            <a class="button buy bd1 mt5" @click="addCart(item.items)">再次购买</a>
            <a class="button bd1 mt5" @click="toDetail(item.id)">查看订单</a>
          </td>
        </tr>
        </tbody>
      </table>
      <div v-else class="center ptb20" >
          <img src="../../../assets/img/mydd.png" alt="" style="display:block;margin:0 auto">
          <div style="text-align: center" class="f14 c999 mt10">您还没有相关的订单哦~</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getOrders, closeOrder } from '@/api/order'
import { formatTime } from '@/utils'
import { skipStatusDict, paymentDict } from '@/utils/dict'
import { addCartMulti } from '@/api/cart'
export default {
  name: 'rt-order',
  metaInfo: {
    title: '我的订单',
    titleTemplate: '工流界MRO一站式采购商城'
  },
  data () {
    return {
      activeName: 'first',
      hasMod: true,
      orders: [],
      skipStatusDict,
      paymentDict,
      origin: ''
    }
  },
  created () {
    this.fetchOrders()
  },
  methods: {
    handleClick (tab) {
      switch (tab.name) {
        case 'first':
          this.orders = this.origin
          break
        case 'second':
          this.orders = this.origin.filter(item => item.status === 'p')
          break
        case 'fourth':
          this.orders = this.origin.filter(item => item.closed === true)
          break
      }
    },
    async fetchOrders () {
      const res = await getOrders()
      this.origin = res.data
      this.orders = Object.assign([], res.data)
    },
    async cancel (id) {
      this.$confirm('确认取消订单？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        try {
          await closeOrder(id)
          this.$message.success('订单已取消！')
          this.fetchOrders()
        } catch (e) {
          console.log(e)
        } finally {
          loading.close()
        }
      }).catch(() => {
      })
    },
    toDetail (id) {
      this.$router.push(`/my/order-detail/${id}`)
    },
    async addCart (items) {
      try {
        await addCartMulti({ items })
        this.$message.success('添加购物车成功！')
        this.$router.push('/cart')
      } catch (e) {
        console.log(e)
      }
    }
  },
  filters: {
    formatDate (value) {
      if (!value) return
      return formatTime(new Date(value))
    }
  }
}
</script>

<style lang="scss" scoped>
.user_right {
  width: 950px;
  background: #fff;
  /deep/.el-tabs {
    padding-bottom: 40px;
    padding: 30px;
    .el-tabs__header {
      height: 40px;
      border-bottom: 1px solid #e6e6e6;
      .el-tabs__item {
        padding: 0 20px;
        height: 40px;
        box-sizing: border-box;
        line-height: 40px;
        display: inline-block;
        list-style: none;
        font-weight: 500;
        color: #303133;
        position: relative;
        font-size: 18px;
      }
      .el-tabs__item:hover {
        color: #4448f8;
      }
      .el-tabs__active-bar {
        height: 3px;
        background-color: #4448f8;
      }
    }
    .el-tabs__content {
      color: #333;
      .ptb20 {
        padding-bottom: 20px;
      }
      .mt40 {
        margin-top: 40px;
      }
      .center {
        text-align: center;
        .ico_fail {
          background: url('~@/assets/img/fail_ico.png') no-repeat 0 0;
          width: 60px;
          height: 63px;
          display: inline-block;
        }
        p {
          color: #999;
          margin-top: 20px;
          font-size: 14px;
        }
      }
      ul {
        overflow: hidden;
        margin-top: 28px;
        li {
          position: relative;
          float: left;
          width: 162px;
          height: 237px;
          margin-left: 20px;
          border: 1px solid #e6e6e6;
          box-sizing: border-box;
          .goA {
            display: block;
          }
          .hd {
            height: 160px;
            padding: 10px 0;
            box-sizing: border-box;
            text-align: center;
            img {
              max-width: 100%;
            }
          }
        }
        li:first-child {
        margin-left: 0;
        }
        li:hover {
          border-color: #4448f8;
          display: block;
        }
        li:before {
          position: absolute;
          content: '查看详情';
          width: 100%;
          line-height: 25px;
          left: 0;
          top: 0;
          color: #fff;
          background: red;
          text-align: center;
          background: rgba(68,72,248,.7);
        }
      }
    }
  }
}
.order_table {
  padding: 0 30px;
}
.order_table table {
  width: 100%;
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: grey;
  text-align: center;
  th.first {
    border-left: 1px solid #e6e6e6;
  }
  th {
    background: #f8f8f8;
    height: 38px;
    line-height: 38px;
    border: 1px solid #e6e6e6;
    border-left: none;
    border-right: none;
    text-align: center;
  }
  th.last {
    border-right: 1px solid #e6e6e6;
  }
}
.order_table td {
  padding: 20px 4px;
  border-bottom: 1px solid #e6e6e6;
  border-right: 1px solid #fff
}
.order_table .opare .button  {
  border-radius: 3px;
  width: 80px;
  height: 30px;
  line-height: 30px;
  display: inline-block;
  margin: 3px 0;
  color: #fff;
  cursor: pointer;
  text-align: center;
}

.order_table .opare .cancel {
  background: #4448f8;
}

.order_table .opare a.bd1 {
  height: 28px;
  line-height: 28px;
  color: #333
}

.order_table .opare a.bd1:hover {
  border-color: #4448f8;
  color: #4448f8
}
</style>
